<template>
	<view>
		<my-navbar title="选择学科" :border="true"></my-navbar>
		<view class="selectSubject-title">请选择您任教的学科</view>
		<view class="selectSubject-subjects">
			<view v-for="(i, j) in i_subject.range" :key="j" class="subject-item" :class="[i_subject.data.subject === i ? 'selected' : '']" @click="i_subject.clickItem(i)">
				{{ i }}
			</view>
			<input
				class="subject-item input"
				:class="[i_subject.other != null ? 'selected' : '']"
				type="text"
				placeholder="其他（请输入）"
				placeholder-class="input-placeholder"
				:value="i_subject.other"
				@click="i_subject.clickItem('')"
				@input="i_subject.handleInput"
			/>
		</view>
		<!-- 浮动底部 START -->
		<view class="app-offset">
			<view class="selectSubject-button"></view>
			<safe-area></safe-area>
		</view>
		<view class="app-fixed-bottom" style="background-color: #FFFFFF;">
			<view class="selectSubject-button primary app-button" hover-class="hover" :class="[l_isPass ? '' : 'disabled']" @click="clickConfirmButton">确定</view>
			<safe-area></safe-area>
		</view>
		<!-- 浮动底部 END -->
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import form from '@/components/my-form/my-form.js';
export default {
	data() {
		return {
			i_subject: {
				range: ['语文', '数学', '英语', '物理', '地理', '生物', '化学', '思想政治', '历史'],
				other: null,
				data: {
					subject: ''
				},
				error: '',
				setData: data => {
					const context = this.i_subject;
					const inRange = context.range.find(i => i == data.subject);
					if (inRange) {
						context.data.subject = data.subject;
					} else {
						context.other = data.subject;
					}
				},
				checkData: () => {
					const context = this.i_subject;
					return [
						() => {
							if (!context.data.subject) return '任教学科不能为空';
						}
					];
				},
				clickItem: value => {
					const context = this.i_subject;
					context.error = '';
					context.data.subject = value;
					context.other = value === '' ? '' : null;
				},
				handleInput: e => {
					const context = this.i_subject;
					context.data.subject = e.detail.value;
					context.other = e.detail.value;
					const inRange = context.range.find(i => i == e.detail.value);
					if (inRange) this.$nextTick(() => (context.other = null));
				}
			}
		};
	},
	computed: {
		...mapState({
			jxyUserInfo: state => state.User.userInfo.jxyUserInfo
		}),
		l_list() {
			return [this.i_subject];
		},
		l_isPass() {
			return form.checkListData(this.l_list).length === 0;
		}
	},
	methods: {
		...mapActions(['updateJxyUserInfo']),
		async clickConfirmButton() {
			let errors = [];
			errors = form.checkListData(this.l_list, true);
			if (errors.length) {
				let error = errors.find(i => i)[0];
				this.$showToast(error);
				return;
			}
			let listData = form.getListData(this.l_list);
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				res1 = await this.$api.user.set_teacher_info({ teachSubject: listData.subject });
			} catch (err) {
				uni.hideLoading();
				this.$showToast(err.message || '保存失败');
				return;
			}
			this.updateJxyUserInfo();
			uni.hideLoading();
			this.$showToast('保存成功');
			uni.navigateBack();
		}
	},
	onLoad() {
		form.setListData(this.l_list, {
			subject: this.jxyUserInfo.teachSubject
		});
	}
};
</script>

<style lang="less" scoped>
.selectSubject-title {
	padding: 40rpx 30rpx;
	font-size: 32rpx;
	color: #444444;
}
.selectSubject-subjects {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	padding-left: 30rpx;
	.subject-item {
		border: 2rpx solid #ebecee;
		border-radius: 32rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;

		padding: 15rpx 30rpx;
		font-size: 28rpx;
		color: #222222;
		&.input {
			width: 222rpx;

			text-align: center;

			/deep/.input-placeholder {
				font-size: 28rpx;
				color: #222222;
			}
		}

		&.selected {
			color: #ff6600;
			border: 2rpx solid #ff6600;

			/deep/.input-placeholder {
				font-size: 28rpx;
				color: transparent;
			}
		}
	}
}

.selectSubject-button {
	height: 88rpx;
	border-radius: 44rpx;
	background-color: #eeeeee;
	margin: 0 30rpx 30rpx 30rpx;

	font-size: 32rpx;
	color: #222222;

	display: flex;
	justify-content: center;
	align-items: center;

	&.primary {
		background-color: #ff6600;
		color: #ffffff;
	}
}
</style>
